<template>
  <el-dialog
    width="70%"
    top="10vh"
    custom-class="warning"
    title="预警设置"
    :visible="visible"
    :modal-append-to-body="false"
    :append-to-body="true"
    :destroy-on-close="true"
    @close="visible = false"
  >
    <div slot="title" class="title"></div>
    <el-form :model="alarm">
      <el-form-item label="当细纱机运行台数:">
        <span>小于或等于&lt;=</span>
        <el-input-number
          v-model="alarm.count"
          style="width:130px"
          size="medium"
          placeholder="请输入"
          :min="0"
          controls-position="right"
        ></el-input-number>
        台
      </el-form-item>
      <el-form-item label="当电流偏差:">
        <el-radio-group v-model="alarm.dlpc">
          <el-radio border size="medium" :label="3">3%</el-radio>
          <el-radio border size="medium" :label="5">5%</el-radio>
          <el-radio border size="medium" :label="10">10%</el-radio>
          <el-radio border size="medium" label="x">自定义百分比</el-radio>
        </el-radio-group>
        <el-input-number
          v-if="alarm.dlpc == 'x'"
          v-model="alarm.dlpcDefine"
          style="width:130px"
          size="medium"
          placeholder="请输入"
          :min="0"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="添加预警联系人:">
        <el-select
          size="medium"
          popper-class="bg-select"
          :popper-append-to-body="false"
          v-model="alarm.person"
          multiple
          filterable
          placeholder="请选择"
        >
          <el-row type="flex" style="padding-left:20px" align="middle">
            <el-col :span="4">
              <div class="check" :class="{ selected: alarm.person == allSelected }" @click="checkAll" />
            </el-col>
            <el-col :span="7">姓名</el-col>
            <el-col :span="4" :offset="1">工号</el-col>
          </el-row>
          <el-option v-for="item in option" :key="item.value" :label="item.name" :value="item.gh">
            <el-row type="flex" align="middle">
              <el-col :span="4">
                <div class="check" />
              </el-col>
              <el-col :span="7">{{ item.name }}</el-col>
              <el-col :span="4" :offset="1">{{ item.gh }}</el-col>
            </el-row>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item></el-form-item>
    </el-form>
    <template slot="footer">
      <el-row class="footer" type="flex" justify="center">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="confirm">应用</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import request from "@/api/request";
export default {
  props: ["default"],
  data() {
    return {
      visible: false,
      alarm: {
        count: "",
        dlpc: 10,
        dlpcDefine: "",
        person: ""
      },
      option: [],
      allSelected: []
    };
  },
  created() {
    this.alarm.dlpc = this.default;
    this.getPerson();
  },
  methods: {
    show() {
      this.visible = true;
    },
    checkAll() {
      this.alarm["person"] = this.alarm["person"] == this.allSelected ? [] : this.allSelected;
    },
    async getPerson() {
      const res = await request.get1("/scheduling/personnel/queryPersonnel");
      if (res.data.code == 1) {
        this.option = res.data.data.records;
        this.allSelected = res.data.data.records.map((item) => {
          return item.gh;
        });
      }
    },
    confirm() {
      let val = this.alarm.dlpc == "x" ? this.alarm.dlpcDefine : this.alarm.dlpc;
      this.$emit("changeDlpc", val);
      this.visible = false;
    }
  }
};
</script>

<style lang="scss">
.warning.el-dialog {
  height: 700px;
  background: url("~@/assets/img/dialog-border.png") no-repeat;
  background-size: 100% 100%;
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__headerbtn {
    top: 20px;
    right: 48px;
    opacity: 0;
  }
  .title {
    height: 90px;
    background: url("~@/assets/img/warning.svg") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }
  .el-form {
    width: 800px;
    margin: 50px auto 0;
    color: #fff;
    font-size: 20px;
    .el-form-item {
      .el-input-number {
        margin: 0 8px;
        .el-input__inner {
          background: rgba(37, 96, 116, 0.5);
          border: none;
          color: #fff;
        }
        .el-input-number__decrease,
        .el-input-number__increase {
          background: rgba(37, 96, 116, 0.5);
          color: #fff;
          border-color: #256074;
        }
      }
      .el-radio.is-bordered {
        background: rgba(37, 96, 116, 0.5);
        color: #fff;
        border: 1px solid transparent;
        border-radius: 17px;
        .el-radio__inner {
          background: #123140;
          border: 1px solid #1a83b5;
        }
        &.is-checked {
          .el-radio__label {
            color: #fff;
          }
          border: 1px solid #1a83b5;
          .el-radio__inner {
            border: 4px solid rgba(29, 193, 246, 1);
          }
          .el-radio__inner::after {
            display: none;
          }
        }
      }
      .el-select {
        width: 320px;
        .el-tag.el-tag--info {
          background: rgba(21, 128, 136, 0.79);
          color: #fff;
          border: 1px solid #005e89;
        }
        .el-input__inner {
          background: rgba(37, 96, 116, 0.5);
          color: #fff;
          border: none;
        }
        .el-select__input {
          color: #fff;
        }
      }
      .bg-select {
        background: rgba(26, 35, 45, 0.79);
        border: 1px solid #69d7fb;
        color: #fff;
        font-size: 16px;
        .check {
          width: 16px;
          height: 16px;
          border-radius: 2px;
          border: 1px solid #69d7fb;
          position: relative;
          cursor: pointer;
          &.selected::before {
            position: absolute;
            top: -12px;
            left: 2px;
            content: "\2714";
            color: rgba(105, 215, 251, 1);
            display: block;
            height: 16px;
            font-weight: normal;
          }
        }
        .el-select-dropdown__item {
          font-size: 16px;
          color: #fff;
          border-bottom: 1px solid rgba(16, 117, 169, 0.5);
          padding-right: 0;
          &.selected .check::before {
            position: absolute;
            top: 2px;
            left: 2px;
            content: "\2714";
            color: rgba(105, 215, 251, 1);
            top: -9px;
            left: 2px;
            display: block;
            height: 16px;
            font-weight: normal;
          }
        }
        .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover,
        .el-select-dropdown__item.selected {
          background: rgba(22, 125, 194, 0.2);
        }
        .popper__arrow {
          display: none;
        }
      }
    }
    .el-form-item__label {
      color: #fff;
      margin-right: 15px;
      font-size: 18px;
    }
    .el-form-item__content {
      font-size: 18px;
    }
  }
  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 50px;
  }
  .el-button {
    width: 100px;
    height: 40px;
    padding: 0;
    line-height: 40px;
    color: #fff;
    background: transparent;
    border: 1px solid #ccc;
    &.el-button--primary {
      background: #074b5a;
      border: 1px solid #37f0ff;
    }
  }
}
</style>
